<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import Transfer from './components/Transfer.vue'
	import Verify from './components/Verify.vue'

	const tableData = ref([{
		type: 0,
		info: '续费 3 年，费用 297元',
		result: 0,
		time: '2017-10-01 12:00',
		ip: '191.128.1.101'
	}, {
		type: 1,
		info: '修改为 dns1.190.vip,dns2.190.vip',
		result: 1,
		time: '2017-10-01 12:00',
		ip: '191.128.1.101'
	}, {
		type: 2,
		info: '新增一条解析',
		result: 2,
		time: '2017-10-01 12:00',
		ip: '191.128.1.101'
	}, {
		type: 3,
		info: '上架一口价',
		result: 1,
		time: '2017-10-01 12:00',
		ip: '191.128.1.101'
	}, {
		type: 4,
		info: '过户到模板',
		result: 1,
		time: '2017-10-01 12:00',
		ip: '191.128.1.101'
	}])

	const transferShow = ref(false)
	const verifyShow = ref(false)


	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const changeAutoFee = (val) => {
		if (val == false) {
			ElMessage({
				message: '已关闭',
				type: 'success',
			})
		}
	}
	const beforeChange = () => {
		return new Promise((resolve) => {
			if (autoFee.value == false) {
				verifyShow.value = true
			} else {
				return resolve(true)
			}
		})
	}
	const isEdit = ref(false)
	const remark = ref('一二三四五六七八九十')
	const autoFee = ref(false)
	const currentPage = ref(1)
	const total = 1000
	const onSubmit = () => {
		verifyShow.value = false
		autoFee.value = true
		ElMessage({
			message: '设置成功！',
			type: 'success',
		})
	}

	const handleTransfer = () => {
		transferShow.value = true
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			域名管理
		</div>
		<div class="top-notice">
			<el-alert
				title="温馨提示：该域名为外部域名，根据域名实名政策要求，如本站的合作商需要实名的，北京荟米会将您的实名材料提交到合作商平台由合作商提交实名。 您提交的管理操作均视为您同意授权我司代为操作，请知悉！"
				type="warning" show-icon></el-alert>
		</div>
		<div class="top-area">
			<div class="area-title">
				xxqxhb.cn 域名基本信息
			</div>
			<div class="area-row">
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							注册时间：
						</div>
						<div class="area-cell-content">
							2017-01-10
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							到期时间：
						</div>
						<div class="area-cell-content">
							2025-01-10 <span class="day"> 还剩60天 </span>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							续费价格：
						</div>
						<div class="area-cell-content">
							99元/年 <el-link>续费 </el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							自动续费：
						</div>
						<div class="area-cell-content">
							<el-switch v-model="autoFee" style="--el-switch-on-color: #F68A0C;"
								:before-change="beforeChange" @change="changeAutoFee" />
						</div>
					</div>
				</div>
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							域名来源：
						</div>
						<div class="area-cell-content">
							<el-link>域名竞价</el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名证书：
						</div>
						<div class="area-cell-content">
							<el-link>查看</el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名备注：
						</div>
						<div class="area-cell-content">
							<div class="remark-flex" v-if="isEdit">
								<el-input v-model="remark" style="width: 200px;"></el-input>
								<el-button link @click="isEdit = false">保存</el-button>
							</div>
							<div class="remark-flex" v-else>
								<span>{{remark}}</span>
								<el-button link @click="isEdit = true">修改 <el-icon>
										<Edit />
									</el-icon></el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="area-right">
					<div class="area-label">状态</div>
					<div class="area-status">正常 <span>|</span> 可交易</div>
					<div class="area-query">
						<el-link>whois查询</el-link>
						<el-link>Baidu查询</el-link>
					</div>
				</div>
			</div>
		</div>
		<div class="top-area">
			<div class="area-title">
				高级功能
			</div>
			<div class="area-row area-high-row">
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							域名模版：
						</div>
						<div class="area-cell-content">
							模版一
						</div>
						<div class="area-cell-right">
							<el-link @click="handleTransfer">过户</el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							DNS设置：
						</div>
						<div class="area-cell-content">
							dns1.190.vip,dns2.190.vip
						</div>
						<div class="area-cell-right">
							<el-link>设置</el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							是否出售：
						</div>
						<div class="area-cell-content">
							未上架
						</div>
						<div class="area-cell-right">
							<el-link>一口价</el-link>
						</div>
					</div>
				</div>
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							原注册商：
						</div>
						<div class="area-cell-content">
							90vip
						</div>

					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名解析：
						</div>
						<div class="area-cell-content">
							无记录
						</div>
						<div class="area-cell-right">
							<el-link>添加 </el-link>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名转移：
						</div>
						<div class="area-cell-content">
							<el-link>域名PUSH </el-link>
							<el-link>转出190</el-link>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="top-area">
			<div class="area-title">
				操作日志
			</div>
			<div class="table-box">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="type" label="操作类型" width="120" align="center">
						<template #default="scope">
							<span v-if="scope.row.type == 0">续费</span>
							<span v-if="scope.row.type == 1">DNS</span>
							<span v-if="scope.row.type == 2">解析</span>
							<span v-if="scope.row.type == 3">出售</span>
							<span v-if="scope.row.type == 4">过户</span>
						</template>
					</el-table-column>
					<el-table-column prop="info" label="操作信息">
						<template #default="scope">
							<div class="flex">{{scope.row.info}} <el-link class="views-btn">查看</el-link></div>
						</template>
					</el-table-column>
					<el-table-column prop="result" label="执行结果" width="120">
						<template #default="scope">
							<span v-if="scope.row.result == 0" class="td-warn">处理中</span>
							<span v-if="scope.row.result == 1" class="td-success">处理成功</span>
							<span v-if="scope.row.result == 2" class="td-error">操作失败</span>
						</template>
					</el-table-column>
					<el-table-column prop="time" label="操作时间" align="center" width="180">
					</el-table-column>
					<el-table-column prop="ip" label="操作IP" align="center" width="180"></el-table-column>
				</el-table>
				<div class="pager-box">
					<span></span>
					<el-pagination v-model:current-page="currentPage" :page-size="10" :background="true"
						:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
		<Verify v-model:show="verifyShow" @submit="onSubmit"></Verify>
		<Transfer v-model:show="transferShow"></Transfer>
	</div>
</template>

<style scoped lang='scss'>
	.top-area {
		padding: 20px;
	}
	
	.views-btn{
		margin-left: 10px;
	}
</style>